<script setup lang="ts">
import type { Route } from '@/types/template'
import { formatDouble } from '@/utils/common'
import { ref, computed } from 'vue'
import { computedAdultMoney, computedChildMoney, computedSinglePrice } from '@/utils/business'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 定义props接收
const props = defineProps<{
  currentRoute?: Route
  adultNum: number
  childNum: number
  btnText: string
}>()

defineEmits(['next'])

// 是否弹出框
const show = ref(false)
// 成人价格
const adultMoney = computed(() => {
  return computedAdultMoney(props.currentRoute, props.adultNum)
})
// 儿童价格
const childMoney = computed(() => {
  return computedChildMoney(props.currentRoute, props.childNum)
})
// 单房差价格
const singlePrice = computed(() => {
  return computedSinglePrice(props.currentRoute, props.adultNum, props.childNum)
})
// 总价
const totalMoney = computed(() => {
  return adultMoney.value + childMoney.value + singlePrice.value
})
</script>

<template>
  <view class="popup-route-info">
    <up-popup :show="show" :closeable="true" @close="show = false">
      <view class="title">费用明细</view>
      <view class="content">
        <view class="sub-title">基本团费</view>
        <view class="price-box">
          <view>
            <view class="price-name">成人价</view>
            <view class="desc">
              ￥<text class="number">{{ currentRoute?.adult_market_price }}</text> X
              <text class="number">{{ adultNum }}</text>
            </view>
          </view>
          <view class="price">
            ￥<text class="number">{{ formatDouble(adultMoney) }}</text>
          </view>
        </view>
        <view class="price-box" v-if="childNum > 0">
          <view>
            <view class="price-name">儿童价</view>
            <view class="desc">
              ￥<text class="number">{{ currentRoute?.child_market_price }}</text> X
              <text class="number">{{ childNum }}</text>
            </view>
          </view>
          <view class="price">
            ￥<text class="number">{{ formatDouble(childMoney) }}</text>
          </view>
        </view>
        <up-line v-if="singlePrice > 0"></up-line>
        <view class="price-box" v-if="singlePrice > 0">
          <view>
            <view class="sub-title">补交房差</view>
            <view class="single_tip"><text>*</text>如需拼房请下单后联系客服</view>
          </view>
          <view class="price">
            ￥<text class="number">{{ formatDouble(singlePrice) }}</text>
          </view>
        </view>
      </view>
      <up-gap height="60" />
    </up-popup>
  </view>
  <!-- 用户操作 -->
  <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <view class="total-price-box">
      总价
      <text class="price">
        ￥<text>{{ formatDouble(totalMoney) }}</text>
      </text>
      <text @click="show = !show">
        明细
        <text class="hx-font" :class="{ 'hx-down': !show, 'hx-up': show }"></text>
      </text>
    </view>
    <view class="buttons">
      <view class="next" @click="$emit('next')"> {{ btnText }} </view>
    </view>
  </view>
</template>

<style lang="scss">
.popup-route-info {
  .title {
    text-align: center;
    line-height: 48px;
    font-weight: bold;
    border-bottom: 1px solid #efefef;
    color: $u-main-color;
    font-size: $fs-xl;
  }
  .content {
    padding: 8px 20px;
    .sub-title {
      font-size: $fs-xl;
      color: $u-main-color;
    }
    .single_tip {
      font-size: $fs-sm;
      color: $u-tips-color;
      text {
        color: $c-main;
      }
    }
    .price-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16rpx 0;
      .price-name {
        color: $u-tips-color;
        font-size: $fs-lg;
      }
      .desc {
        color: $u-main-color;
        font-size: $fs-xs;
        .number {
          font-size: $fs-md;
        }
      }
      .price {
        font-size: $fs-sm;
        color: $c-main;
        .number {
          font-size: $fs-xl;
        }
      }
    }
  }
}
</style>
